<template>
  <el-dialog 
    v-model="visible" 
    title="显示设置" 
    width="600px" 
    top="8vh"
    :lock-scroll="true"
    append-to-body
  >
    <div class="display-settings">
      <!-- 桌面图标设置 -->
      <div class="settings-section">
        <h3 class="section-title">
          <el-icon><Grid /></el-icon>
          桌面图标
        </h3>
        <div class="setting-item">
          <div class="setting-label">图标大小</div>
          <el-slider
            v-model="localSettings.iconSize"
            :min="40"
            :max="80"
            :step="5"
            show-stops
          />
          <div class="setting-value">{{ localSettings.iconSize }}px</div>
        </div>
        <div class="setting-item">
          <div class="setting-label">图标间距</div>
          <el-slider
            v-model="localSettings.iconSpacing"
            :min="100"
            :max="150"
            :step="10"
          />
          <div class="setting-value">{{ localSettings.iconSpacing }}px</div>
        </div>
        <div class="setting-item">
          <div class="setting-label">显示图标标签</div>
          <el-switch v-model="localSettings.showIconLabel" />
        </div>
      </div>

      <!-- 任务栏设置 -->
      <div class="settings-section">
        <h3 class="section-title">
          <el-icon><Monitor /></el-icon>
          任务栏
        </h3>
        <div class="setting-item">
          <div class="setting-label">任务栏位置</div>
          <el-select v-model="localSettings.taskbarPosition" style="width: 200px">
            <el-option label="底部" value="bottom" />
            <el-option label="顶部" value="top" />
            <el-option label="左侧" value="left" />
            <el-option label="右侧" value="right" />
          </el-select>
        </div>
        <div class="setting-item">
          <div class="setting-label">自动隐藏任务栏</div>
          <el-switch v-model="localSettings.autoHideTaskbar" />
        </div>
        <div class="setting-item">
          <div class="setting-label">使用小任务栏图标</div>
          <el-switch v-model="localSettings.smallTaskbarIcons" />
        </div>
      </div>

      <!-- 视觉效果设置 -->
      <div class="settings-section">
        <h3 class="section-title">
          <el-icon><MagicStick /></el-icon>
          视觉效果
        </h3>
        <div class="setting-item">
          <div class="setting-label">启用透明效果</div>
          <el-switch v-model="localSettings.transparencyEffects" />
        </div>
        <div class="setting-item">
          <div class="setting-label">启用动画效果</div>
          <el-switch v-model="localSettings.animations" />
        </div>
        <div class="setting-item">
          <div class="setting-label">背景模糊强度</div>
          <el-slider
            v-model="localSettings.blurStrength"
            :min="0"
            :max="20"
            :step="2"
            :disabled="!localSettings.transparencyEffects"
          />
          <div class="setting-value">{{ localSettings.blurStrength }}px</div>
        </div>
      </div>

      <!-- 缩放和分辨率 -->
      <div class="settings-section">
        <h3 class="section-title">
          <el-icon><ZoomIn /></el-icon>
          缩放和布局
        </h3>
        <div class="setting-item">
          <div class="setting-label">显示缩放</div>
          <el-select v-model="localSettings.scale" style="width: 200px">
            <el-option label="100% (推荐)" :value="100" />
            <el-option label="110%" :value="110" />
            <el-option label="125%" :value="125" />
            <el-option label="150%" :value="150" />
          </el-select>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleReset">恢复默认</el-button>
        <div>
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleApply">应用</el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { Grid, Monitor, MagicStick, ZoomIn } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  settings: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:modelValue', 'change'])

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 默认设置
const defaultSettings = {
  iconSize: 56,
  iconSpacing: 110,
  showIconLabel: true,
  taskbarPosition: 'bottom',
  autoHideTaskbar: false,
  smallTaskbarIcons: false,
  transparencyEffects: true,
  animations: true,
  blurStrength: 10,
  scale: 100
}

// 本地设置（用于编辑）
const localSettings = ref({ ...defaultSettings, ...props.settings })

// 监听props变化
watch(() => props.settings, (newSettings) => {
  localSettings.value = { ...defaultSettings, ...newSettings }
}, { deep: true })

const handleApply = () => {
  emit('change', { ...localSettings.value })
  visible.value = false
  ElMessage.success('显示设置已应用')
}

const handleCancel = () => {
  localSettings.value = { ...defaultSettings, ...props.settings }
  visible.value = false
}

const handleReset = () => {
  localSettings.value = { ...defaultSettings }
  ElMessage.info('已恢复默认设置')
}
</script>

<style scoped>
.display-settings {
  max-height: 65vh;
  overflow-y: auto;
  padding: 10px 0;
}

.settings-section {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e4e7ed;
}

.settings-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 20px 0;
}

.section-title .el-icon {
  color: #409eff;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
}

.setting-item:last-child {
  margin-bottom: 0;
}

.setting-label {
  font-size: 14px;
  color: #606266;
  min-width: 140px;
}

.setting-value {
  min-width: 60px;
  text-align: right;
  font-size: 13px;
  color: #909399;
  font-weight: 500;
}

.setting-item .el-slider {
  flex: 1;
  max-width: 250px;
}

.dialog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 滚动条美化 */
.display-settings::-webkit-scrollbar {
  width: 6px;
}

.display-settings::-webkit-scrollbar-thumb {
  background: #dcdfe6;
  border-radius: 3px;
}

.display-settings::-webkit-scrollbar-thumb:hover {
  background: #c0c4cc;
}
</style>

